<template>
  <div>
    <h1>System bars（系统栏）</h1>
    <p>
      v-system-bar 组件可以用于向用户显示状态。
      它看起来像Android系统栏，可以包含图标、空格和一些文本。
    </p>
    <br />

    <h2>属性</h2>
    <br />

    <h3>颜色</h3>
    <p>您可以选择使用 color prop更改 v-system-bar 的颜色。</p>
    <div>
      <v-system-bar dark color="primary">
        <v-spacer></v-spacer>
        <v-icon>mdi-wifi-strength-4</v-icon>
        <v-icon>mdi-signal-cellular-outline</v-icon>
        <v-icon>mdi-battery</v-icon>
        <span>12:30</span>
      </v-system-bar>
      <br />
      <v-system-bar dark color="red lighten-2">
        <v-spacer></v-spacer>
        <v-icon>mdi-wifi-strength-4</v-icon>
        <v-icon>mdi-signal-cellular-outline</v-icon>
        <v-icon>mdi-battery</v-icon>
        <span>12:30</span>
      </v-system-bar>
      <br />
      <v-system-bar dark color="indigo darken-2">
        <v-spacer></v-spacer>
        <v-icon>mdi-wifi-strength-4</v-icon>
        <v-icon>mdi-signal-cellular-outline</v-icon>
        <v-icon>mdi-battery</v-icon>
        <span>12:30</span>
      </v-system-bar>
    </div>
    <br />

    <h3>熄灯</h3>
    <p>您可以使用 lights-out 属性来降低 v-system-bar 的不透明度。</p>
    <div>
      <v-subheader>Lights out (light)</v-subheader>
      <v-card :img="require('../assets/bg-2.jpg')" height="200px">
        <v-system-bar color="primary" lights-out>
          <v-spacer></v-spacer>
          <v-icon>mdi-wifi-strength-4</v-icon>
          <v-icon>mdi-signal-cellular-outline</v-icon>
          <v-icon>mdi-battery</v-icon>
          <span>12:30</span>
        </v-system-bar>
      </v-card>
      <v-subheader>Lights out (dark)</v-subheader>
      <v-card :img="require('../assets/bg-2.jpg')" height="200px">
        <v-system-bar color="primary" lights-out dark>
          <v-spacer></v-spacer>
          <v-icon>mdi-wifi-strength-4</v-icon>
          <v-icon>mdi-signal-cellular-outline</v-icon>
          <v-icon>mdi-battery</v-icon>
          <span>12:30</span>
        </v-system-bar>
      </v-card>
    </div>
    <br />

    <h3>主题</h3>
    <p>可以将dark或light主题变量应用于 v-system-bar。</p>
    <div>
      <v-subheader>Light status bar</v-subheader>
      <v-card :img="require('../assets/bg-2.jpg')" height="200px">
        <v-system-bar color="primary">
          <v-spacer></v-spacer>
          <v-icon>mdi-wifi-strength-4</v-icon>
          <v-icon>mdi-signal-cellular-outline</v-icon>
          <v-icon>mdi-battery</v-icon>
          <span>12:30</span>
        </v-system-bar>
      </v-card>
      <v-subheader>Dark status bar</v-subheader>
      <v-card :img="require('../assets/bg-2.jpg')" height="200px">
        <v-system-bar color="primary" dark>
          <v-spacer></v-spacer>
          <v-icon>mdi-wifi-strength-4</v-icon>
          <v-icon>mdi-signal-cellular-outline</v-icon>
          <v-icon>mdi-battery</v-icon>
          <span>12:30</span>
        </v-system-bar>
      </v-card>
    </div>
    <br />

    <h3>窗口</h3>
    <p>带有窗口控件和状态信息的窗口栏。</p>
    <div>
      <v-system-bar window dark>
        <v-icon>mdi-message</v-icon>
        <span>10 unread messages</span>
        <v-spacer></v-spacer>
        <v-icon>mdi-minus</v-icon>
        <v-icon>mdi-checkbox-blank-outline</v-icon>
        <v-icon>mdi-close</v-icon>
      </v-system-bar>
    </div>
    <br />
  </div>
</template>

<script>
export default {};
</script>